<.focus_box>
  <:title>
    Invite guest to {@site.domain}
  </:title>

  <:subtitle>
    Enter the email address and role of the person you want to invite. We will contact them over email to offer them access to {@site.domain} analytics.<br /><br />
    The invitation will expire in 48 hours
  </:subtitle>

  <.form :let={f} for={@conn} action={Routes.membership_path(@conn, :invite_member, @site.domain)}>
    <PlausibleWeb.Components.Billing.Notice.limit_exceeded
      :if={Map.get(assigns, :is_at_limit, false)}
      current_role={@current_team_role}
      current_team={@site_team}
      limit={Map.get(assigns, :team_member_limit, 0)}
      resource="members"
    />

    <div class="my-6">
      <.input
        type="email"
        field={f[:email]}
        label="Email address"
        placeholder="joe@example.com"
        required="true"
      />

      <%= if @conn.assigns[:error] do %>
        <div class="text-red-500 mb-4">{@conn.assigns[:error]}</div>
      <% end %>
    </div>

    <fieldset x-data="{selectedOption: null}">
      <.label for={f[:role].id}>
        Role
      </.label>
      <div class="mt-1 bg-white rounded-md -space-y-px dark:bg-gray-800">
        <label
          class="border-gray-200 dark:border-gray-500 rounded-tl-md rounded-tr-md relative border p-4 flex cursor-pointer"
          x-class="{'bg-indigo-50 border-indigo-200 dark:bg-indigo-500 dark:border-indigo-800 z-10': selectedOption === 'editor', 'border-gray-200': selectedOption !== 'editor'}"
        >
          <.input
            type="radio"
            field={f[:role]}
            id="role_editor"
            value="editor"
            x-model="selectedOption"
            required="true"
            width="w-4"
            class="block dark:bg-gray-900 h-4 w-4 mt-0.5 cursor-pointer text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500"
          />
          <div class="ml-3 flex flex-col">
            <span
              class="text-gray-900 dark:text-gray-100 block text-sm font-medium"
              x-class="{'text-indigo-900 dark:text-white': selectedOption === 'editor', 'text-gray-900 dark:text-gray-100': selectedOption !== 'editor'}"
            >
              Guest Editor
            </span>
            <span
              class="text-gray-500 dark:text-gray-400 text-sm block"
              x-class="{'text-indigo-700 dark:text-gray-100': selectedOption === 'editor', 'text-gray-500 dark:text-gray-200': selectedOption !== 'editor'}"
            >
              Can view stats and change site settings
            </span>
          </div>
        </label>

        <label
          class="border-gray-200 dark:border-gray-500 rounded-bl-md rounded-br-md relative border p-4 flex cursor-pointer"
          x-class="{'bg-indigo-50 border-indigo-200 dark:bg-indigo-500 dark:border-indigo-800 z-10': selectedOption === 'viewer', 'border-gray-200': selectedOption !== 'viewer'}"
        >
          <.input
            type="radio"
            field={f[:role]}
            id="role_viewer"
            value="viewer"
            x-model="selectedOption"
            required="true"
            width="w-4"
            class="block dark:bg-gray-900 h-4 w-4 mt-0.5 cursor-pointer text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500"
          />
          <div class="ml-3 flex flex-col">
            <span
              class="text-gray-900 dark:text-gray-100 text-sm block font-medium"
              x-class="{'text-indigo-900 dark:text-white': selectedOption === 'viewer', 'text-gray-900 dark:text-gray-100': selectedOption !== 'viewer'}"
            >
              Guest Viewer
            </span>
            <span
              class="text-gray-500 dark:text-gray-400 text-sm block"
              x-class="{'text-indigo-700 dark:text-gray-100': selectedOption === 'viewer', 'text-gray-500 dark:text-gray-200': selectedOption !== 'viewer'}"
            >
              Can view stats but cannot access settings
            </span>
          </div>
        </label>
      </div>
    </fieldset>

    <div class="mt-6">
      <.button type="submit" class="w-full">
        Invite
      </.button>
    </div>
  </.form>
</.focus_box>
